<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #000;
        }

        .box {
            height: 300px;
            width: 300px;
            margin: 100px auto;
            transform-style: preserve-3d;
            position: relative;
            transform: rotateX(-61deg) rotateY(93deg);
            animation: dcdc 5s 3s infinite alternate linear;
        }

        .box div {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0.9;
        }

        .top {
            transform: translateY(-150px) rotateX(90deg);
        }

        .bottom {
            transform: translateY(150px) rotateX(-90deg);
        }

        .left {
            transform: translateX(-150px) rotateY(-90deg)
        }

        .right {
            transform: translateX(150px) rotateY(90deg)
        }

        .qian {
            transform: translateZ(-150px);
        }

        .hou {
            transform: translateZ(150px);
        }

        div li {
            height: 100px;
            width: 100px;
            box-sizing: border-box;
            border: 1px solid #fff;
            float: left;
            position: relative;
            animation:  xuanzhuan 3s  2s infinite ;
        }
        @keyframes dcdc {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            30% {
                transform: rotateX(110deg) rotateY(110deg);
            }
            60% {
                transform: rotateX(220deg) rotateY(220deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        @keyframes xuanzhuan {
            0% {
            transform:  rotateX(0deg);
            }
            100% {
            transform:  rotateX(360deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="qian"></div>
    <div class="hou"></div>
</div>
<script src="./jquery/jquery.min.js"></script>
<script>
    var divs = $(".box").children();
    var arr = ["蛮王.jpg", "死歌.jpg", "布隆.jpg", "武器.jpg", "寒冰.jpg", "亚索.jpg"]
    $(function () {
        var ul = $(".box div").append("<ul></ul>");
        for (var i = 0; i < 9; i++) {
            $(".box div>ul").append("<li></li>");
        }

        //  设置每个li的颜色
        divs.each(function (index, ele) {
            li = $(ele).children().children();
            li.css("backgroundImage", "url(images/" + arr[index] + ")");
            for (var i = 0; i < 9; i++) {
                if (i < 3) {
                    li.eq(i).css({
                        "backgroundPositionX": -i * 100 + "px",
                        "backgroundPositionY": 0 + "px"
                    });
                    console.log(li.eq(i));
                } else if (i < 6) {
                    li.eq(i).css({
                        "backgroundPositionX": -(i + 3) * 100 + "px",
                        "backgroundPositionY": -100 + "px"
                    });
                } else {
                    li.eq(i).css({
                        "backgroundPositionX": -(i + 6) * 100 + "px",
                        "backgroundPositionY": -200 + "px"
                    });
                }

            }

        });


        //  让 全频切换3d轮播图


        //        设置一个空数组存储每个li的值
        var array = [];
        for (var i = 0; i < 54; i++) {
            array.push(parseInt(Math.random() * 400));
            // 把设定得值给li
        }
        $("li").each(function (index, ele) {
            $(ele).css({
                "left": array[index],
                "top": array[index]
            });
        });
        $("li").each(function (index, ele) {
            $(ele).animate({"left": 0, "top": 0}, 3000)
        });

    });


</script>
</body>
</html>